import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { InsureEnsurePlanListDto } from '@/api/insureEnsurePlan/types'
import RenderDescription, { type DescItemDto } from '@/components/render-descriotion/Index'
import { getInsureCompanyRuleDetail } from '@/api/insureCompanyRule'
import type { InsureCompanyRuleDetailDto } from '@/api/insureCompanyRule/types'
import {
    AreaRuleLimitCnEnum,
    DangerRuleCnEnum,
    InsureTypeCnEnum,
    RepeatRuleCnEnum,
    ReplaceRuleAllowTypeCnEnum,
    ReplaceRuleMethodCnEnum,
    ValidPeopleLimitRuleCnEnum,
    ValidRuleTypeCnEnum
} from '@/const/enum'

@Component
export class RuleInfo extends Render {
    @Prop() detailData!: InsureCompanyRuleDetailDto

    get ruleData() {
        return [
            {
                label: '规则名称',
                value: this.detailData.ruleName
            },
            {
                label: '规则名称',
                value: InsureTypeCnEnum[this.detailData.insureType]
            },
            {
                label: '年龄规则',
                value:
                    this.detailData.ageRule?.startAge === -1 &&
                    this.detailData.ageRule?.endAge === -1
                        ? '不限'
                        : `限制（${this.detailData.ageRule?.startAge === -1 ? '不限制' : this.detailData.ageRule?.startAge + '岁'} <= 投保员工共年龄 <= ${this.detailData.ageRule?.endAge === -1 ? '不限制' : this.detailData.ageRule?.endAge + '岁'}）`
            },
            {
                label: '出险规则',
                value:
                    this.detailData.dangerRule === DangerRuleCnEnum.不限制
                        ? '不限制'
                        : `限制（员工出险时，可以${DangerRuleCnEnum[this.detailData.dangerRule]}减保）`
            }
        ] as DescItemDto[]
    }

    render() {
        return (
            <>
                <RenderDescription renderData={this.ruleData} row={2} />
                <div class="flex mt-20px">
                    <div class="text-black-300">区域限制：</div>
                    <div>
                        <div>{AreaRuleLimitCnEnum[this.detailData.companyAreaRule]}</div>
                        <div class="bg-black-400 px-16px py-12px rounded-sm mt-8px">
                            <div>
                                <span class="text-black-300">
                                    客户
                                    {this.detailData.companyAreaRule ===
                                    AreaRuleLimitCnEnum.允许投保区域
                                        ? '允许'
                                        : '限制'}
                                    区域：
                                </span>
                                <span>{this.detailData.companyAreaRuleContent?.join('；')}</span>
                            </div>
                            <div class="mt-16px">
                                <span class="text-black-300">
                                    派遣单位
                                    {this.detailData.serveCompanyAreaRule ===
                                    AreaRuleLimitCnEnum.允许投保区域
                                        ? '允许'
                                        : '限制'}
                                    区域：
                                </span>
                                <span>
                                    {this.detailData.serveCompanyAreaRuleContent?.join('；')}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex mt-20px">
                    <div class="flex-shrink-0 text-black-300">生效规则：</div>
                    <div>
                        <div>
                            <div>
                                {this.detailData.effectRule?.map((item) => {
                                    return item.effectTypeVal === ValidRuleTypeCnEnum.次日生效 ? (
                                        <div class="bg-black-400 px-16px py-12px rounded-sm mb-10px">
                                            生效方式等于{ValidRuleTypeCnEnum[item.effectTypeVal]}
                                            时，每日{item.allowOperateTime}
                                            之前操作家暴，生效时间可以选择次日；人数限制
                                            {
                                                ValidPeopleLimitRuleCnEnum[
                                                    item.personNumConfig.personNumTypeVal as number
                                                ]
                                            }
                                            规则，起投人数≥{item.personNumConfig.firstEnsureNum}
                                            人，且在保人数≥{item.personNumConfig.alreadyEnsureNum}人
                                        </div>
                                    ) : (
                                        <>
                                            <div class="mb-10px">或</div>
                                            <div class="bg-black-400 px-16px py-12px rounded-sm mb-10px">
                                                生效方式等于
                                                {ValidRuleTypeCnEnum[item.effectTypeVal]}
                                                时，第一次激活方案，生效时间只能选择次日；每日
                                                {item.allowOperateTime}之前，每一个整点{item.minute}
                                                分之前操作加保，次整点生效；人数限制
                                                {
                                                    ValidPeopleLimitRuleCnEnum[
                                                        item.personNumConfig
                                                            .personNumTypeVal as number
                                                    ]
                                                }
                                                规则，起投人数≥{item.personNumConfig.firstEnsureNum}
                                                人，且在保人数≥
                                                {item.personNumConfig.alreadyEnsureNum}人
                                            </div>
                                        </>
                                    )
                                })}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex mt-20px">
                    <div class="flex-shrink-0 text-black-300">扣费规则：</div>
                    <div>
                        <div class="bg-black-400 px-16px py-12px rounded-sm mb-10px">
                            灵活方案根据时间按天扣除费用，整点生效的立即扣除保费（第一次机会次日生效，次日扣费）
                        </div>
                        <div class="bg-black-400 px-16px py-12px rounded-sm">
                            月单按月立即扣除费用，自然月{this.detailData.deductRule?.deductTypeConfig?.moreThanDate}日后生效，扣除{this.detailData.deductRule?.deductTypeConfig?.deductRatio}倍月保费
                        </div>
                    </div>
                </div>

                <div class="flex mt-20px">
                    <div class="flex-shrink-0 text-black-300">扣费规则：</div>
                    <div>
                        <div class="bg-black-400 px-16px py-12px rounded-sm mb-10px">
                            灵活方案根据时间按天扣除费用，整点生效的立即扣除保费（第一次机会次日生效，次日扣费）
                        </div>
                        <div class="bg-black-400 px-16px py-12px rounded-sm">
                            月单按月立即扣除费用，自然月{this.detailData.deductRule?.deductTypeConfig?.moreThanDate}日后生效，扣除{this.detailData.deductRule?.deductTypeConfig?.deductRatio}倍月保费
                        </div>
                    </div>
                </div>

                <div class="flex mt-20px">
                    <div class="flex-shrink-0 text-black-300">替换规则：</div>
                    <div class="bg-black-400 px-16px py-12px rounded-sm mb-10px">
                            月单员工在保期间，减保不退钱，{ReplaceRuleAllowTypeCnEnum[this.detailData.replaceRule?.monthInsure?.allowReplace]}替换员工，和被替换的在保员工{ReplaceRuleMethodCnEnum[this.detailData.replaceRule?.monthInsure?.replaceMethod]}相同
                    </div>
                </div>

                <div class="flex mt-20px">
                    <div class="flex-shrink-0 text-black-300">查重规则：</div>
                    <div class="bg-black-400 px-16px py-12px rounded-sm mb-10px">
                        {
                            this.detailData.repeatRule?.map((item, index) => {
                                return RepeatRuleCnEnum[item]
                            }).join('，')
                        }
                    </div>
                </div>
            </>
        )
    }
}

export default toNative<{ detailData: InsureCompanyRuleDetailDto }, {}>(RuleInfo)
